// ============================================================================
// 主布局组件
// ============================================================================

import React from 'react'
import { Outlet, useLocation } from 'react-router-dom'
import { Sidebar } from './Sidebar'
import Header from './Header'

/**
 * 主布局组件
 * 包含侧边栏、头部和主内容区域
 */
export function Layout() {
  const location = useLocation()

  // 根据当前路径确定页面名称
  const getCurrentPage = () => {
    const path = location.pathname
    if (path.startsWith('/accounts')) return 'accounts'
    if (path.startsWith('/tasks')) return 'tasks'
    if (path.startsWith('/data')) return 'data'
    if (path.startsWith('/settings')) return 'settings'
    return 'dashboard'
  }

  return (
    <div className="h-screen flex bg-gray-50 dark:bg-gray-900">
      {/* 侧边栏 */}
      <Sidebar />

      {/* 主内容区域 */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* 头部 */}
        <Header currentPage={getCurrentPage()} />

        {/* 页面内容 */}
        <main className="flex-1 overflow-auto p-6">
          <Outlet />
        </main>
      </div>
    </div>
  )
}
